<template>
  <div class="rank">
    <div class="rank-top">
      <ul class="rank-top-con">
        <li>
          <a href="javascript:;" class="on">
            <p class="img"></p>
            <p>热卖排行</p>
          </a>
        </li>
        <li>
          <a href="javascript:;">
            <p class="img"></p>
            <p>特价排行</p>
          </a>
        </li>
        <li>
          <a href="javascript:;">
            <p class="img"></p>
            <p>新品排行</p>
          </a>
        </li>
      </ul>
    </div>
    <div class="rank-main">
      <ul>
        <li>
          <div class="rank-item">
            <p class="item-pic">
              <a href="javascript:;">
                <img src="./images/1.jpg" alt="iphone" />
              </a>
            </p>
            <div class="item-info">
              <div class="item-info-title">
                <a href="javascript:;"
                  >【官网价直降1100】Apple iPhone 8 Plus 256GB 银色
                  移动联通电信4G手机</a
                >
              </div>
              <p class="item-info-price">定金：¥100.00</p>
            </div>
          </div>
        </li>
        <li>
          <div class="rank-item">
            <p class="item-pic">
              <a href="javascript:;">
                <img src="./images/1.jpg" alt="iphone" />
              </a>
            </p>
            <div class="item-info">
              <div class="item-info-title">
                <a href="javascript:;"
                  >【官网价直降1100】Apple iPhone 8 Plus 256GB 银色
                  移动联通电信4G手机</a
                >
              </div>
              <p class="item-info-price">定金：¥100.00</p>
            </div>
          </div>
        </li>
        <li>
          <div class="rank-item">
            <p class="item-pic">
              <a href="javascript:;">
                <img src="./images/1.jpg" alt="iphone" />
              </a>
            </p>
            <div class="item-info">
              <div class="item-info-title">
                <a href="javascript:;"
                  >【官网价直降1100】Apple iPhone 8 Plus 256GB 银色
                  移动联通电信4G手机</a
                >
              </div>
              <p class="item-info-price">定金：¥100.00</p>
            </div>
          </div>
        </li>
        <li>
          <div class="rank-item">
            <p class="item-pic">
              <a href="javascript:;">
                <img src="./images/1.jpg" alt="iphone" />
              </a>
            </p>
            <div class="item-info">
              <div class="item-info-title">
                <a href="javascript:;"
                  >【官网价直降1100】Apple iPhone 8 Plus 256GB 银色
                  移动联通电信4G手机</a
                >
              </div>
              <p class="item-info-price">定金：¥100.00</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "Rank",
};
</script>
<style lang="less" scoped>
.rank {
  width: 1200px;
  margin: 0 auto;
}
.rank-top {
  width: 300px;
  margin: 0 auto;
  .rank-top-con {
    display: flex;
    justify-content: space-around;
    & li:hover a {
      text-decoration: none;
      color: #bfa;
    }
    a {
      font-size: 16px;
      .img {
        background: url(./images/bg0.png);
        width: 35px;
        height: 35px;
        margin: 10px auto;
      }
    }
    .on {
      color: red;
      .img {
        background-position: -35px 0;
      }
    }
  }
}
.rank-main {
  padding: 10px;
  ul {
    display: flex;
    justify-content: space-around;
    li {
      color: black;
      .rank-item{
          border: 1px solid #e1251b;
          width: 270px;
      }
      .item-pic {
        text-align: center;
        margin: 5px 0 18px;
        img{
            width: 200px;
            height: 200px;
        }
      }
      .item-info{
          background-color: #fafafa;
          .item-info-title{
              margin: 0 auto;
              height: 50px;
              line-height: 20px;
              padding-left: 10px;
              a{
                  color: #333;
                  text-decoration: none;
              }
          }
          .item-info-price{
              font-size: 20px;
              color: #e1251b;
              height: 35px;
              padding-left: 10px;
          }
      }
    }
  }
}
</style>